<template>
  <div class="app-container">
    <a-search :quary-list="searchConfig.queryList"
              :show-search="searchConfig.showSerch"
              :columns="tableConfig.columns"
              @search="search"
              :show-add="searchConfig.showAdd"
              :label-width="searchConfig.labelWidth"
              @addOne="addOne"
    />
    <a-table :data="tableData"
             ref="table"
             class="mt-1"
             :columns="tableConfig.columns ? tableConfig.columns:[]"
             :operation="tableConfig.operation ? tableConfig.operation:['info','add','edit','delete']"
             :operation-width="tableConfig.operationWidth"
             :showOperation="tableConfig.showOperation ? tableConfig.showOperation:true"
             :permission="tableConfig.permission ? tableConfig.permission : undefined"
             @pagechange="pageChange"
             @todo="doOperatipn"
    >
      <template slot="table-operation" slot-scope="{row}">
        <slot name='wrap-operation' :row="row"></slot>
      </template>
      <template  slot-scope="{row,slotName}">
        <slot :name="slotName" :row="row"></slot>
      </template>

    </a-table>
    <a-form-dialog
      :disabled="formDisabled"
      :form="form"
      :form-config="formConfig"
      v-if="showDialog_"
      :status="formDialogStatus"
      @confirm="confirm"
      @cancel="cancel">
    </a-form-dialog>
  </div>

</template>

<script>
import aSearch from './a-search.vue'
import aTable from './a-table.vue'
import aFormDialog from "./a-form-dialog.vue";

export default {
  components: {aFormDialog, aSearch, aTable},
  props: {
    service: undefined,
    searchConfig: {
      type: Object,
      default: () => {
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
      }
    },
    formConfig: {
      type: Object,
      default: () => {
      }
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [],
      query: {},
      form: {},
      formDialogStatus: 'add',
      showDialog_: this.showDialog,
      clickBtn: undefined,
      formDisabled: false
    }
  },
  methods: {
    /**
     * @desc: 取消
     * @author: YYanan
     * @date: 2024-10-30 14:40
     */
    cancel() {
      this.showDialog_ = false
      this.$emit('update:showDialog', false)
    },
    /**
     * @desc: 新增一个
     * @author: YYanan
     * @date: 2024-10-30 14:27
     */
    addOne() {
      this.formDisabled = false
      this.clickBtn = 'add'
      if (this.searchConfig?.customAdd) {
        this.$emit('todo', 'add', {})
      } else {
        this.formDialogStatus = 'add'
        this.showDialog_ = true
        this.form = {}
        this.$emit('update:showDialog', true)
      }

    },
    /**
     * @desc: 确认
     * @author: YYanan
     * @date: 2024-10-30 14:27
     */
    async confirm(e) {
      const type = this.clickBtn?.key ?? this.clickBtn
      if (type === 'info') {
        this.showDialog_ = false
      }
      if (type === 'add') {
        if (this.tableConfig?.customAdd) {
          this.$emit('todo', 'add', e)
        } else {
          try {
            await this.service.add(e)
            await this.initData()
            this.showDialog_ = false
            this.$message.success('操作成功')
          } catch (e) {
            this.$message.success('操作失败')
          }
        }
      }

      if (type === 'edit') {
        if(this.clickBtn?.custom){
          this.$emit('todo', 'edit', e)
        }else {
          try {
            this.formDialogStatus = 'edit'
            await this.service.update(e)
            await this.initData()
            this.showDialog_ = false
            this.$message.success('操作成功')
          } catch (e) {
            this.$message.success('操作失败')
          }
        }
      }
    },
    /**
     * @desc: 编辑
     * @author: YYanan
     * @date: 2024-10-30 15:08
     */
    // async edit(e) {
    //   if (this.clickBtn && this.clickBtn?.custom && (this.clickBtn?.key ?? this.clickBtn) === 'edit') {
    //     this.$emit('todo', 'edit', e)
    //   } else {
    //     try {
    //       this.formDialogStatus = 'edit'
    //       await this.service.update(e)
    //       await this.initData()
    //       this.$message.success('操作成功')
    //     } catch (e) {
    //       this.$message.success('操作失败')
    //     }
    //   }
    // },
    /**
     * @desc: 搜索
     * @author: YYanan
     * @date: 2024-10-30 14:27
     */
    search(e) {
      this.query = e
      this.$refs?.table?.resetPageNum()
      this.initData()
    },
    /**
     * @desc: 页码改变
     * @author: YYanan
     * @date: 2024-10-30 14:27
     */
    pageChange(page) {
      this.query = {...this.query, ...page}
      this.initData(this.query)
    },
    async doOperatipn(e, rowData) {
      this.clickBtn = e
      const type = e?.key ?? e
      if (type === 'edit') {
        this.formDisabled = false
        if (e?.custom) {
          this.$emit('todo', type, rowData)
        } else {
          this.isEdit = true
          if (!e?.useServiceData) {
            this.form = rowData
          } else {
            this.form = (await this.service.detail(rowData?.id ?? rowData[e?.idKey]))
          }
          this.formDialogStatus = 'edit'
          this.showDialog_ = true
          this.$emit('update:showDialog', true)
        }
        return
      }
      if (type === 'info') {
        this.formDisabled = true
        if (e?.custom) {
          this.$emit('todo', type, rowData)
        } else {
          if (!e?.useServiceData) {
            this.form = rowData
          } else {
            this.form = (await this.service.detail(rowData?.id ?? rowData[e?.idKey]))
          }
          this.formDialogStatus = 'info'
          this.showDialog_ = true
          this.$emit('update:showDialog', true)
        }
        return
      }

      if (type === 'delete') {
        if (e?.custom) {
          this.$emit('todo', type, rowData)
        } else {
          await this.service.delete(rowData?.id ?? rowData[e?.idKey])
          await this.initData()
          this.$message.success('操作成功')
        }
        return
      }

      this.$emit('todo', type, rowData)

    },
    async initData() {
      try {
        this.tableData = await this.service.query(this.query)
      } catch (e) {
        console.log()
      }
    }
  },
  watch: {
    showDialog: {
      handler(e) {
        this.showDialog_ = e
      }
    }
  }

}
</script>

<style scoped lang="scss">

</style>
